import React from 'react';
import {
  Card,
  Form,
  Input,
  Button,
  Switch,
  Space,
  Row,
  Col,
  Alert,
  Divider
} from 'antd';
import {
  SaveOutlined,
  InfoCircleOutlined,
  ApiOutlined,
  EnvironmentOutlined,
  LinkOutlined,
} from '@ant-design/icons';

const { TextArea } = Input;

const CreateForm = ({ onSubmit, onCancel, isSubmitting }) => {
  const [form] = Form.useForm();

  const handleFinish = (values) => {
    onSubmit(values);
  };

  const handleReset = () => {
    form.resetFields();
  };

  return (
    <Card className="create-form-container">
      {/* 提示信息 */}
      <Alert
        message="创建提示"
        description="创建局域网后，您将成为该网络的管理员。请确保Tracker服务已正确配置并可访问。"
        type="info"
        icon={<InfoCircleOutlined />}
        className="create-tip"
        showIcon
      />

      <Form
        form={form}
        layout="vertical"
        onFinish={handleFinish}
        initialValues={{
          isPublic: false
        }}
      >
        {/* 基本信息 */}
        <div className="form-section">
          <h4 className="section-title">基本信息</h4>
          <Divider className="section-divider" />
          
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                label="局域网名称"
                name="name"
                rules={[
                  { required: true, message: '请输入局域网名称' },
                  { max: 100, message: '局域网名称不能超过100个字符' }
                ]}
              >
                <Input 
                  placeholder="输入局域网名称"
                  prefix={<ApiOutlined />}
                  size="large"
                />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item
            label="描述"
            name="description"
            rules={[
              { max: 500, message: '描述不能超过500个字符' }
            ]}
          >
            <TextArea
              placeholder="描述这个局域网的用途和特点（可选）"
              rows={4}
              showCount
              maxLength={500}
            />
          </Form.Item>

          <Form.Item
            label="物理地址"
            name="physicalAddress"
            rules={[
              { max: 255, message: '物理地址不能超过255个字符' }
            ]}
          >
            <Input
              placeholder="输入局域网的物理地址（可选）"
              prefix={<EnvironmentOutlined />}
              size="large"
            />
          </Form.Item>
        </div>

        {/* Tracker配置 */}
        <div className="form-section">
          <h4 className="section-title">Tracker配置</h4>
          <Divider className="section-divider" />
          
          <Alert
            message="重要提示"
            description="请确保Tracker服务已启动并可正常访问。创建后系统将尝试连接到指定的Tracker。"
            type="warning"
            className="tracker-warning"
            showIcon
          />

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="Tracker名称"
                name="trackerName"
                rules={[
                  { required: true, message: '请输入Tracker名称' },
                  { max: 100, message: 'Tracker名称不能超过100个字符' }
                ]}
              >
                <Input 
                  placeholder="输入Tracker名称"
                  size="large"
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="Tracker URL"
                name="trackerUrl"
                rules={[
                  { required: true, message: '请输入Tracker URL' },
                  { max: 255, message: 'Tracker URL不能超过255个字符' }
                ]}
              >
                <Input
                  placeholder="如: 192.168.1.1:6969"
                  prefix={<LinkOutlined />}
                  size="large"
                />
              </Form.Item>
            </Col>
          </Row>
        </div>

        {/* 访问设置 */}
        <div className="form-section">
          <h4 className="section-title">访问设置</h4>
          <Divider className="section-divider" />
          
          <Form.Item
            label="网络类型"
            name="isPublic"
            valuePropName="checked"
          >
            <div className="network-type-setting">
              <Switch 
                checkedChildren="公网"
                unCheckedChildren="内网"
                size="default"
                onChange={(checked) => {
                  form.setFieldValue('isPublic', checked);
                }}
              />
              <div className="network-type-description" style={{ marginTop: 8, color: '#666' }}>
                开启后，其他用户可以搜索并申请加入此局域网
              </div>
            </div>
          </Form.Item>
        </div>

        {/* 提交按钮 */}
        <Form.Item className="form-actions">
          <Space size="middle">
            <Button 
              type="primary" 
              htmlType="submit" 
              size="large"
              icon={<SaveOutlined />}
              loading={isSubmitting}
              className="submit-btn"
            >
              {isSubmitting ? '创建中...' : '创建局域网'}
            </Button>
            <Button 
              size="large" 
              onClick={handleReset}
              disabled={isSubmitting}
              className="reset-btn"
            >
              重置
            </Button>
            <Button
              size="large" 
              onClick={onCancel}
              disabled={isSubmitting}
              className="cancel-btn"
            >
              取消
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default CreateForm;